<template>
  <div class="remote-super box-shadow">
    <div class="content-view">
      <div class="module-tit">
        <p class="left-info">
          <span class="cat-view" @click.stop="showType = 1">超算服务</span>
          <span class="cat-view" @click.stop="showType = 2">作业查看</span>
        </p>
        <p class="right-info">
          <span>剩余: 核/时</span>
          <span class="renew-view" @click.stop="showModal">续费</span>
        </p>
      </div>

      <template v-if="showType == 1">
        <p class="tit-view">请选择超算服务</p>
        <a-collapse v-model:activeKey="activeNum">
          <a-collapse-panel name="1">
            <template #title>
              <i class="el-icon-menu"></i>
              <span class="collapse-tit">超算服务</span>
            </template>
            <div class="item-box flex-rowl">
              <div class="item-view" style="border: 1px solid #e9e9e9" @click.stop="handlerOpenCupPop()">
                <div class="img-view" style="width: 180px; height: 140px"></div>
                <p style="text-align: center">
                  <span class="applic-view-name">CFX</span>
                </p>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </template>

      <template v-if="showType == 2">
        <XTModuleTableSuperComputerSubmit />
      </template>
    </div>
  </div>
  <BaseModal ref="modalRef" on-modal-cancel="modalCancel" @on-modal-ok="modalOK">
    <template #titleArea>申请超算服务 </template>
    <template #contentArea>
      <p>请选择您要申请的核/时数</p>
      <a-input v-model:value="value" />
    </template>
  </BaseModal>
</template>
<script setup lang="ts">
import BaseModal from "@/components/Basics/BaseModal.vue"
import XTModuleTableSuperComputerSubmit from "@/components/Business/XTModuleTableSuperComputer/XTModuleTableSuperComputerSubmit.vue"
const value = ref("")
const showType = ref(1)
const activeNum = ref(1)
const modalRef = ref()
const handlerOpenCupPop = () => {
  console.log(1)
}
const showModal = (): void => {
  modalRef.value.setOpen()
}
const modalOK = () => {
  modalRef.value.setCloes()
}
</script>

<style scoped lang="less">
.remote-super {
  background-color: #fff;
  min-height: 100vh;
  .content-view {
    margin: 0 0 0 20px;
  }
  .tit-view {
    margin: 20px 20px 20px 0;
    text-indent: 10px;
    border-left: 2px solid #000;
    text-align: left;
  }
  .module-tit {
    padding: 0 20px;
    margin-right: 20px;
    height: 40px;
    line-height: 40px;
    background: #2471b2;
    color: #fff;
    .left-info {
      float: left;
      .cat-view {
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .right-info {
      float: right;
      .renew-view {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
  .collapse-tit {
    margin-left: 10px;
  }
  /deep/ .el-collapse-item__content {
    .loading-view {
      width: 100%;
    }
    width: 100% !important;
    display: flex;
    justify-content: flex-start;
    .item-box {
      padding: 20px;
      transition: box-shadow 1s ease-in-out;
      width: 180px;
      height: 140px;
      .view-hidden {
        visibility: hidden;
      }
      .item-view {
        position: relative;
        transition: box-shadow 0.5s;
        .applic-view-name {
          padding: 0 10px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
        }
        &:hover {
          box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
          cursor: pointer;
        }
        margin: 10px 10px;
        width: 180px;
        height: 180px;
        border: 1px solid #ccc;
        .time-view {
          padding: 10px 0;
          text-align: center;
          color: #f00;
        }
        .img-view {
          width: 100%;
          height: 100px;
          // overflow: hidden;
        }
        p {
          position: absolute;
          bottom: 0;
          text-align: center;
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          box-sizing: border-box;
          cursor: pointer;
          white-space: nowrap;
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
}
/deep/ .el-upload-list__item {
  margin: 5px auto;
}
</style>
